<template>
  <div class="zc-view">
    <el-page-header @back="goBack" content="政策宣传及反馈详情"></el-page-header>
    <div class="zc-view-box">
      <div class="zc-view-box-top">
        <span>宣传时间：2017年6月28日</span>
        <span>宣传人：石中强</span>
        <span>宣传位置：铜梁区安居镇赛龙村村委会</span>
      </div>
      <div class="zc-view-box-center">
        <div class="title">政策宣传位置</div>
        <baidu-map
          class="bm-view"
          :center="center"
          :zoom="zoom"
          :scroll-wheel-zoom="true"
          @ready="handler"
        >
          <bm-marker :position="center" :dragging="true" animation="BMAP_ANIMATION_BOUNCE" />
          <bm-map-type
            :map-types="['BMAP_HYBRID_MAP','BMAP_NORMAL_MAP']"
            anchor="BMAP_ANCHOR_TOP_LEFT"
          ></bm-map-type>
        </baidu-map>
      </div>
      <div class="zc-view-box-center">
        <div class="title">政策宣传资料</div>
        <div class="table-box">
          <xTable
            :loading="loading"
            index
            :head="head"
            :tableData="tableData"
            @on-changePage="(v)=>getData(v)"
            :btn="btn"
            @on-lookClick="lookClick"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import xTable from "@/views/xtable.vue";
export default {
  name: "Bmap",
  data() {
    return {
      btn: {
        look: { name: "查看", way: "on-lookClick" }
      },
      head: {
        date: "照片名称"
      },
      tableData:[],
      loading:false,
      center: { lng: 0, lat: 0 },
      zoom: 3
    };
  },
  components: {
    xTable
  },
  methods: {
    goBack() {
      console.log("go back");
      this.$router.go(-1);
    },
    handler(BMap, map) {
      console.log(BMap, map);
      this.center.lng = 106.404;
      this.center.lat = 30.915;
      this.zoom = 15;
    },
    lookClick(item) {
      console.log(item);
    }
  },
  mounted() {}
};
</script>

<style lang="scss" scoped>
.zc-view {
  padding: 30px;
  .bm-view {
    width: 500px;
    height: 400px;
    margin: 0 0 20px 30px;
  }
}
.zc-view-box {
  border: 1px solid #f5f5f5;
  overflow: hidden;
  .zc-view-box-top {
    padding: 40px 20px;
    span {
      font-size: 14px;
      color: #999;
      line-height: 30px;
      margin-right: 30px;
    }
  }
  .zc-view-box-center {
    .title {
      color: #48494d;
      font-weight: bold;
      text-indent: 20px;
      line-height: 50px;
      background: #f8f8f8;
      margin-bottom: 20px;
    }
    .table-box {
      padding: 0 30px;
    }
  }
}
</style>
<style lang="scss">
.anchorBL a {
  display: none;
}
.anchorBL img {
  display: none;
}
.anchorBL span {
  display: none !important;
}
</style>
